<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<script>
description("Test return value of getComputedStyle() for area tag.");
window.jsTestIsAsync = true;
var area;

window.onload = function() {
  area = document.getElementById("areaTest");
  if (window.eventSender) {
    var x = area.offsetParent.offsetLeft + area.offsetLeft + area.offsetWidth / 2;
    var y = area.offsetParent.offsetTop + area.offsetTop + area.offsetHeight / 2;
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseMoveTo(x - 1, y);
  }
}

function onAreaHover() {
 shouldBeEqualToString("window.getComputedStyle(area, null).color", "rgb(0, 0, 255)");
 finishJSTest();
}
</script>
<map name="imagemap1">
  <area id="areaTest" onmouseover="onAreaHover()" shape="rect" coords="0, 0, 100, 100">
</map>
<img src="resources/greenbox-100px.png" border="0" align="left" usemap="#imagemap1">
<style>
area:hover {
  color: blue;
}
</style>
